<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 最简单的html 标签 + js 百度功能 
        抖动 三缸机器 
        易用
    -->
    <input type="text" id="undebounce" placeholder="请输入你要搜索的内容" autofocus />
    <button id="btn">btn</button>
    <button id="cancel">取消搜索时间绑定</button>
    <script>
        window.onload = function(){
            const input  = document.querySelector('#undebounce');
            const cancel = document.getElementById('cancel');
            const btn = document.getElementById('btn')
            const consoleOne = () =>{console.log('one');}
            const consoleTwo = () =>{console.log('two');}
            const consoleThree = () =>{console.log('three');}

            btn.addEventListener('click',consoleOne)
            btn.addEventListener('click',consoleTwo)
            btn.addEventListener('click',consoleThree)
            /*
            *@func 搜索功能
            *@params {content:string} 关键字
            * @return 返回结果列表
            */
           function doInput(event){
                let keyword = event.target.value;
                // 搜索比较复杂 封装能力 能封装就封装 解耦
                // 应该放到外面
                ajax(keyword)
                // console.log(event);
                // console.log(keyword);
           }
            function ajax(content){
                console.log('准备实时搜索'+ content)
            }
            input.addEventListener('keydown',function(event){
                if(event.keyCode == 13){
                    console.log('搜索吧');
                }
            })
            cancel.addEventListener('click',function(){
                input.removeEventListener('input',doInput);
                btn.removeEventListener('click',consoleOne)
            })
        }
    </script>
</body>
</html>